<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<style>
    ul{
        border: solid 1px goldenrod;
        margin: 10px;
    }
</style>
<div id="app">

    index:<input type="text" v-model.number="index">
    key:<input type="text" v-model="key">
    val:<input type="text" v-model="val">
    <input type="button" value="add" @click="add">
    <input type="button" value="pop" @click="pop">
    <ul>
        <li v-for="(item,index) in lists" :key="index">
           <ul>
               {{index}}
                   <li v-for="(value,key,objIndex) in item">
                       {{key+'--'+value}}
                   </li>
           </ul>
        </li>
    </ul>
    <div>
        {{info.name}}
        {{info.age}}
        {{info.gender}}
    </div>

</div>

<script type="text/javascript">

    var vm = new Vue({
        el: '#app',
        data: {
            index:'',
            key:'',
            val:'',
            lists:[],
            info:{}
        },
        methods:{
            add:function(){
                if(!this.key || !this.val||this.index===''){
                    return false;
                }
                key=this.key
                val=this.val;
                this.$set(this.lists[this.index],key,val)

            },
           pop:function(){
                this.lists.pop()
            }
        },
        mounted:function(){
            const lists=[
                {'a':'ajax','j':'java'},
                {'p':'php'}
            ];
            const info={
                name:'hk',
                age:'28',
            };
            this.lists=lists;
            this.info=info;

        }
    })
   // vm.info.gender='male'; //加不上去，也不具有响应式
    vm.$set(vm.info,'gender','male');

</script>

</body>
</html>